<template>
  <div class="order-list">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-input
        v-model="tempSearchQuery"
        placeholder="订单编号 / 用户姓名 / 手机号 / 门店"
        clearable
        class="search-input"
      />
      <el-select v-model="tempSearchStatus" placeholder="订单状态" clearable class="search-select">
        <el-option label="全部" value="" />
        <el-option
          v-for="status in orderStatusOptions"
          :key="status.value"
          :label="status.label"
          :value="status.value"
        />
      </el-select>
      <el-date-picker
        v-model="tempSearchDate"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        class="date-picker"
        value-format="YYYY-MM-DD"
      />
      <el-button type="primary" @click="handleSearch">搜索</el-button>
      <el-button @click="resetSearch">重置</el-button>
    </div>

    <!-- 列表 -->
    <div class="table-wrapper">
      <el-table
        :data="paginatedOrders"
        border
        stripe
        max-height="650"
        class="order-table"
        row-key="id"
      >
        <el-table-column label="序号" width="60">
          <template #default="scope">
            {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="orderNo" label="订单编号" />
        <el-table-column prop="userName" label="下单用户" />
        <el-table-column prop="phone" label="联系方式" />
        <el-table-column prop="storeName" label="下单门店" />
        <el-table-column prop="isDelivery" label="是否上门">
          <template #default="scope">
            <el-tag :type="scope.row.isDelivery ? 'success' : 'info'">
              {{ scope.row.isDelivery ? '上门' : '到店' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="orderTime" label="下单时间" />
        <el-table-column prop="photo" label="照片">
          <template #default="scope">
            <el-image
              v-if="scope.row.photo"
              :src="scope.row.photo"
              fit="cover"
              style="width: 50px; height: 50px; cursor: pointer"
              :preview-src-list="[scope.row.photo]"
            />
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="订单金额" align="right" />
        <el-table-column prop="remark" label="备注" show-overflow-tooltip />
        <el-table-column prop="status" label="订单状态">
          <template #default="scope">
            <el-tag :type="statusTagType(scope.row.status || '')">
              {{ scope.row.status || '未知' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="90">
          <template #default="scope">
            <el-button type="primary" size="mini" @click.stop="openOrderDetail(scope.row)">
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="filteredOrders.length"
        :page-size="pageSize"
        v-model:current-page="currentPage"
      />
    </div>

    <!-- 订单详情弹窗 -->
    <el-dialog v-model="dialogVisible" title="订单详情" width="700px">
      <el-descriptions border column="2" size="default">
        <el-descriptions-item label="订单编号"
          ><b>{{ selectedOrder.orderNo }}</b></el-descriptions-item
        >
        <el-descriptions-item label="下单用户"
          ><b>{{ selectedOrder.userName }}</b></el-descriptions-item
        >
        <el-descriptions-item label="联系方式">{{ selectedOrder.phone }}</el-descriptions-item>
        <el-descriptions-item label="下单门店">{{ selectedOrder.storeName }}</el-descriptions-item>
        <el-descriptions-item label="是否上门">
          <el-tag :type="selectedOrder.isDelivery ? 'success' : 'info'">
            {{ selectedOrder.isDelivery ? '上门' : '到店' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ selectedOrder.orderTime }}</el-descriptions-item>
        <el-descriptions-item label="订单金额"
          ><b style="color: red">￥{{ selectedOrder.price }}</b></el-descriptions-item
        >
        <el-descriptions-item label="订单状态">
          <el-tag :type="statusTagType(selectedOrder.status || '')">{{
            selectedOrder.status || '未知'
          }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="备注">{{ selectedOrder.remark || '无' }}</el-descriptions-item>
        <el-descriptions-item label="照片">
          <el-image
            v-if="selectedOrder.photo"
            :src="selectedOrder.photo"
            fit="cover"
            style="width: 100px; height: 100px; cursor: pointer"
            :preview-src-list="[selectedOrder.photo]"
          />
          <span v-else>无</span>
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { getOrders, type Order } from '@/api/order'

const tempSearchQuery = ref('')
const tempSearchStatus = ref('')
const tempSearchDate = ref<[string, string] | null>(null)

const searchQuery = ref('')
const searchStatus = ref('')
const searchDate = ref<[string, string] | null>(null)

const currentPage = ref(1)
const pageSize = ref(10)

const dialogVisible = ref(false)
const selectedOrder = ref<Order>({} as Order)

const orders = ref<Order[]>([])

const orderStatusOptions = [
  { label: '已下单', value: '已下单' },
  { label: '已到店', value: '已到店' },
  { label: '已清洗', value: '已清洗' },
  { label: '已烘干', value: '已烘干' },
  { label: '已熨烫', value: '已熨烫' },
  { label: '已打包', value: '已打包' },
  { label: '已完成', value: '已完成' }
]

onMounted(async () => {
  orders.value = await getOrders()
})

const handleSearch = () => {
  searchQuery.value = tempSearchQuery.value
  searchStatus.value = tempSearchStatus.value
  searchDate.value = tempSearchDate.value
  currentPage.value = 1
}

const resetSearch = () => {
  tempSearchQuery.value = ''
  tempSearchStatus.value = ''
  tempSearchDate.value = null
  searchQuery.value = ''
  searchStatus.value = ''
  searchDate.value = null
  currentPage.value = 1
}

const filteredOrders = computed(() => {
  return orders.value.filter(order => {
    const matchesQuery =
      !searchQuery.value ||
      order.orderNo.includes(searchQuery.value) ||
      order.userName.includes(searchQuery.value) ||
      order.phone.includes(searchQuery.value) ||
      order.storeName.includes(searchQuery.value)
    const matchesStatus = !searchStatus.value || order.status === searchStatus.value
    const matchesDate =
      !searchDate.value ||
      (order.orderTime >= searchDate.value[0] && order.orderTime <= searchDate.value[1])
    return matchesQuery && matchesStatus && matchesDate
  })
})

const paginatedOrders = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  return filteredOrders.value.slice(start, start + pageSize.value)
})

const openOrderDetail = (row: Order) => {
  selectedOrder.value = row
  dialogVisible.value = true
}

const statusTagType = (status: string) => {
  switch (status) {
    case '已下单':
      return 'info'
    case '已到店':
      return 'primary'
    case '已清洗':
    case '已烘干':
    case '已熨烫':
      return 'warning'
    case '已打包':
      return 'purple'
    case '已完成':
      return 'success'
    default:
      return 'default'
  }
}
</script>

<style scoped>
.search-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.search-input {
  width: 240px;
}
.search-select {
  width: 150px;
}
.date-picker {
  width: 200px;
}

.table-wrapper {
  padding: 12px 16px;
  background: #fff;
  border-radius: 8px;
  overflow-x: auto;
  margin-bottom: 12px; /* 分页与表格间距 */
}

.order-table {
  min-width: 1200px;
}

.pagination {
  text-align: right;
}
</style>
